<template>
  <div>
    <div class="title">1.用途：</div>
    <div class="content">
        useActiveElement: 监听当前页面的活动元素，并且在组件销毁的时候自动取消监听
    </div>
    <div class="box" style="display: flex">
      <input class="red" data-n="red"/>
      <input class="yellow" data-n="yellow"/>
    </div>
    <span>{{activeElement?.dataset.n}}</span>
  </div>
</template>

<script setup lang="ts">
import { useActiveElement } from "@vueuse/core";
import { watch } from "vue";
const activeElement = useActiveElement();
watch(activeElement, val=>{
    console.log(val?.dataset.n)
})
</script>

<style scoped>
.red {
  width: 50px;
  height: 50px;
  border-radius: 5px;
  background-color: rgb(243, 93, 67);
  margin: 0 40px 0 40px;
}
.yellow {
  width: 50px;
  height: 50px;
  border-radius: 5px;
  background-color: rgb(162, 234, 18);
}
.title {
  font-size: 18px;
  line-height: 60px;
  font-weight: bolder;
}
.content {
  margin-bottom: 20px;
  padding-left: 40px;
}
</style>